<template>
	<view>
		<view class="container" v-if=" isData">

			<!-- 头部背景图 -->
			<view class="dealer-bg" style="position:static;">
				<image style="z-index: 10;" mode="widthFix" :src="background"></image>
			</view>

			<!-- 填写申请信息 -->
			<block v-if=" !is_applying ">
				<view class="dis-flex flex-dir-column flex-y-center">
					<view class="widget-form b-f m-top20 dis-flex flex-dir-column">
						<view class="form-title f-30">{{ words.apply.words.title.value }}</view>
						<view class="form-box dis-flex flex-dir-column">
							<form @submit="formSubmit" report-submit="true">
								<view class="form-field dis-flex flex-y-center">
									<view class="field-label">邀请人</view>
									<view class="field-input">
										<text>{{ referee_name }}（请核对）</text>
									</view>
								</view>
								<view class="form-field dis-flex flex-y-center">
									<view class="field-label">姓名</view>
									<view class="field-input flex-box">
										<input name="name" placeholder="请输入真实姓名" :value="name"></input>
									</view>
								</view>
								<view class="form-field dis-flex flex-y-center">
									<view class="field-label">手机号</view>
									<view class="field-input flex-box">
										<input name="mobile" placeholder="请输入手机号" :value="mobile"></input>
									</view>
								</view>
								<!-- 申请协议 -->
								<view class="form-license dis-flex flex-x-center flex-y-center">
									<view class="license-radio dis-flex flex-y-center" @tap="toggleSetRead">
										<text class="license-icon f-38 iconfont icon-radio" :class="[ is_read ? 'c-violet' : 'col-bb' ]"></text>
										<text class="f-28 col-80">我已阅读并了解</text>
									</view>
									<text @tap="onToggleRules" class="f-28 c-violet">【{{ words.apply.words.license.value }}】</text>

								</view>
								<!-- 立即申请 -->
								<view class="form-submit dis-flex flex-x-center">
									<button form-type="submit" :disabled="disabled">{{ words.apply.words.submit.value }}</button>
								</view>
							</form>
						</view>
					</view>
				</view>
				<!-- <zandialog id="zan-base-dialog"></zandialog> -->
			</block>

			<!-- 等待审核 -->
			<view v-if=" is_applying " class="dealer-boot dis-flex flex-dir-column flex-y-center">
				<view class="boot__msg f-30 dis-flex flex-dir-column flex-y-center">
					<text class="msg__icon iconfont icon-shenhezhong"></text>
					<text class="msg__content m-top20 f-29 col-80">{{ words.apply.words.wait_audit.value }}</text>
				</view>
				<!-- 去商城逛逛 -->
				<view class="boot__submit form-submit dis-flex flex-x-center">
					<form @submit="navigationToIndex" report-submit="true">
						<button form-type="submit">{{ words.apply.words.goto_mall.value }}</button>
					</form>
				</view>
			</view>

			<xy-dialog title="申请协议" content="" :show="dialogshow" @cancelButton="clickCancel" @confirmButton="clickConfirm"
			 :isShowCancel="!dialogshow" confirmColor="#df5000">
				<!-- rule_detail -->
				<view style="padding: 0 30upx 30upx;text-align:left;">
					<view v-for="(items,indexs) in rule_detail" :key='index' style="margin: 20upx 0upx;">
						{{items}}
					</view>
				</view>
			</xy-dialog>

		</view>
	</view>
</template>

<script>
	// const Dialog = require('../../../components/dialog/dialog.js');
	// import zandialog from '../../../components/dialog/index.vue';
	import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
	export default {
		components: {
			// zandialog,
			xyDialog
		},
		data() {
			return {
				dialogshow: false, //拼团规则是否显示
				rule_detail: {},
				is_read: false,
				disabled: false,
				isData: '',
				background: '',
				is_applying: '',
				words: '',
				referee_name: '',
				name: '',
				mobile: '',
				is_dealer: '',
				license: '',

			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onLoad: function() {
			// console.log(123);return false;
			// 获取分销商申请状态
			this.getApplyState();
			console.log(this.name)
		},

		methods: {

			/**
			 * 获取分销商申请状态
			 */
			getApplyState: function() {
				let _this = this;
				_this._get('user.dealer/apply', {
					referee_id: _this.getRefereeid()
				}, function(result) {
					let data = result.data;
					// 当前是否已经为分销商
					if (data.is_dealer) {
						uni.redirectTo({
							url: '../index/index'
						});
					}
					// 设置当前页面标题
					uni.setNavigationBarTitle({
						title: data.words.apply.title.value
					});
					data.isData = true;
					_this.setData(data);
					console.log(data);
				});
			},

			/**
			 * 显示申请协议
			 */
			onToggleRules: function() {

				let _this = this;

				var str = _this.license;
				var rule_detail = str.split("。");
				// console.log(rule_detail);

				_this.setData({
					dialogshow: !_this.dialogshow,
					rule_detail: rule_detail,
				});
				return false;


				Dialog({
					title: '申请协议',
					message: this.license,
					selector: '#zan-base-dialog',
					buttons: [{
						text: '我已阅读',
						color: 'red',
						type: 'cash'
					}]
				}).then(() => {
					// console.log('=== dialog resolve ===', 'type: confirm');
				});
			},

			/**
			 * 已阅读
			 */
			toggleSetRead: function() {
				this.setData({
					is_read: !this.is_read
				});
			},

			/**
			 * 提交申请 
			 */
			formSubmit: function(e) {
				let _this = this,
					values = e.detail.value;

				// 记录formId
				_this.saveFormId(e.detail.formId);

				// 验证姓名
				if (!values.name || values.name.length < 1) {
					_this.showError('请填写姓名');
					return false;
				}

				// 验证手机号
				if (!/^\+?\d[\d -]{8,12}\d/.test(values.mobile)) {
					_this.showError('手机号格式不正确');
					return false;
				}

				// 验证是否阅读协议
				if (!_this.is_read) {
					_this.showError('请先阅读分销商申请协议');
					return false;
				}

				// 按钮禁用
				_this.setData({
					disabled: true
				});

				// 数据提交
				_this._post_form('user.dealer.apply/submit', values, function() {
					// 获取分销商申请状态
					_this.getApplyState();
				}, null, function() {
					// 解除按钮禁用
					_this.setData({
						disabled: false
					});
				});
			},

			/**
			 * 去商城逛逛
			 */
			navigationToIndex: function(e) {

				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 跳转到首页
				uni.switchTab({
					url: '/pages/index/index',
				})
			},

			/**
			 * 获取推荐人id
			 */
			getRefereeid: function() {
				return uni.getStorageSync('referee_id');
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.c-violet {
		color: #786cff;
	}

	.col-80 {
		color: #808080;
	}

	.col-bb {
		color: #bbb;
	}

	.f-38 {
		font-size: 38upx;
	}

	.dealer-bg image {
		display: block;
		width: 99%;
		position: static;
	}

	.widget-form {
		width: 700upx;
		box-sizing: border-box;
		box-shadow: 0 1upx 20upx rgba(0, 0, 0, 0.21);
		border-radius: 12upx;
		margin-top: -80upx;
		z-index: 99;
	}

	.widget-form .form-title {
		padding: 0 40upx;
		height: 90upx;
		line-height: 90upx;
		border-bottom: 1upx solid #e7e7e7;
	}

	.widget-form .form-box {
		padding: 35upx;
	}

	.widget-form .form-box .form-field {
		height: 80upx;
		margin-bottom: 24upx;
		padding: 10upx 28upx;
		background-color: #f9f9f9;
		box-sizing: border-box;
		font-size: 28upx;
	}

	.widget-form .form-box .form-field .field-label {
		width: 130upx;
		color: #808080;
	}

	.form-license .license-icon {
		margin-right: 12upx;
	}

	.form-submit {
		margin-top: 40upx;
	}

	.form-submit button {
		font-size: 30upx;
		background: #786cff;
		border: 1upx solid #786cff;
		color: white;
		border-radius: 50upx;
		padding: 0 120upx;
	}

	.form-submit button[disabled] {
		background: #8e84fc;
		border-color: #8e84fc;
		color: white;
	}

	/* 等待审核 */

	.dealer-boot {
		padding: 10upx 30upx;
		margin-top: 80upx;
	}

	.dealer-boot .msg__icon {
		font-size: 120upx;
		color: #8e84fc;
	}

	.dealer-boot .boot__submit {
		margin-top: 60upx;
	}
</style>
